<template>
  <div class="ranking_list">
    <div class="inner_box">
      <!-- 官方榜 -->
      <div class="officialList_title"><h3>官方榜</h3></div>
      <div class="officialList">
        <div
          class="officialList_wrap"
          v-for="(item, index) in officialList"
          :key="index"
        >
          <div class="officialList_img">
            <div class="imgbox" :style="{ background: background[index] }">
              <img :src="item.coverImgUrl" />
            </div>
            <!-- <div class="officialList_info">
            <div class="play_count">
              <span class="iconfont icon-erji"></span>
              <span>{{ item.playCount | playCount }}</span>
            </div>
          </div> -->
          </div>
          <div class="officialList_desc">
            <template v-if="index < 4">
              <div class="office_box">
                <div
                  class="office_item"
                  v-for="(item2, index2) in getRanklingList[index]"
                  :key="index2"
                  @click="onPaly(item2)"
                >
                  <span class="number">{{ index2 + 1 }}</span>
                  <span class="name">{{ item2.name }}</span>
                  <span class="author">{{ item2.ar[0].name }}</span>
                </div>
                <span class="more" @click="golist(item.id)">查看全部></span>
              </div>
            </template>

            <template v-if="index >= 4">
              <div class="office_box">
                <div
                  class="office_item"
                  v-for="(item3, index3) in spliceListOfSinger"
                  :key="index3.id"
                >
                  <!-- <span>{{ index2 + 1 }}.{{ item2.first }}-{{ item2.second }}</span> -->
                  <span class="number">{{ index3 + 1 }}</span>
                  <span class="name">{{ item3.name }}</span>
                </div>
                <span class="more">查看全部></span>
              </div>
            </template>
          </div>
        </div>
      </div>
      <!-- 更多榜单 -->
      <div class="officialList_title"><h3>更多榜单</h3></div>
      <div class="officialList">
        <div class="recommendationList_wrap">
          <div
            class="recommendationList_item"
            v-for="(item, index) in moreList"
            :key="index"
            @click="golist(item.id)"
          >
            <div class="recommendationList_img">
              <img :src="item.coverImgUrl" />
              <span class="iconfont icon-bofang1"></span>
              <div class="recommendationList_info">
                <!-- 播放量 -->
                <div class="play_count">
                  <span class="iconfont icon-erji"></span>
                  <span>{{ item.playCount | playCount }}</span>
                </div>
              </div>
            </div>
            <!-- 标题 -->
            <div class="recommendationList_titles">{{ item.name }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import request from "../../../../api/request"
import { mapGetters } from "vuex"
export default {
  data() {
    return {
      // 官方榜
      officialList: [],
      // 更多榜单
      moreList: [],
      background: ["#6E97DF", "#54BCC0", "#CB5979", "#C47659", "#9A55BF"],
    }
  },
  created() {
    this.getlist()
  },
  computed: {
    ...mapGetters(["spliceListOfSinger", "getRanklingList"]),
  },
  methods: {
    // 获取所有榜单
    async getlist() {
      let result = await request({
        url: "/toplist/detail",
        method: "get",
      })
      var list = result.list
      var artistToplist = {
        coverImgUrl: result.artistToplist.coverUrl,
        name: result.artistToplist.name,
      }
      var officialList = []
      var recommendationList = []
      var globalList = []
      var moreList = []
      for (var index in list) {
        var name = list[index].name
        if (
          name == "云音乐飙升榜" ||
          name == "云音乐新歌榜" ||
          name == "网易原创歌曲榜" ||
          name == "云音乐热歌榜"
        ) {
          officialList.push(list[index])
        } else {
          moreList.push(list[index])
        }
      }
      this.officialList = officialList
      this.officialList.push(artistToplist)
      this.recommendationList = recommendationList
      this.globalList = globalList
      this.moreList = moreList
    },

    golist(id) {
      this.$router.push(`/home/index/details?id=${id}`)
    },
    // 点击播放
    onPaly(item) {
      this.$store.dispatch("getSong", { id: item.id, autoplay: true })
    },
  },
}
</script>

<style lang="scss" scoped>
@import "../../../../../static/scss/common.scss";
.ranking_list {
  width: 100%;
  padding-top: 20px;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  .inner_box {
    width: 100%;
    max-width: 1200px;
  }
}
h3 {
  text-align: left;
  font-size: 20px;
  height: 50px;
  line-height: 50px;
  border-bottom: 1px solid #ccc;
}
.officialList_title {
  margin-bottom: 20px;
}
.officialList {
  display: flex;
  flex-wrap: wrap;
}

.officialList_title span {
  font-size: 35px;
  font-weight: 600;
}

.officialList_wrap {
  width: 33.33%;
  padding: 0px 10px;
  box-sizing: border-box;
}

.officialList_img {
  width: 100%;
  position: relative;
  .imgbox {
    height: 100px;
    width: 100%;
    overflow: hidden;
    position: relative;
    img {
      width: 70%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

// .officialList_img .officialList_info {
//   position: absolute;
//   left: 0px;
//   top: 0px;
//   width: 100%;
//   height: 30px;
//   line-height: 30px;
//   text-align: right;
//   padding: 0px 10px;
//   box-sizing: border-box;
//   color: #fff;
//   font-size: 15px;
//   .play_count {
//     width: 100%;
//   }
//   .iconfont {
//     font-size: 13px;
//     padding-right: 2px;
//   }
// }
.office_box {
  border: 1px solid rgb(238, 237, 237);
  border-top: none;
  border-bottom: none;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
}
.office_item {
  display: flex;
  padding: 0px 10px;
  box-sizing: border-box;
  transition: 0.5s;
  span {
    text-align: left;
    font-size: 13px;
    height: 35px;
    line-height: 35px;
    width: 100%;
    color: rgb(99, 97, 95);
    display: inline-block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: 0.5s;
  }
  .number {
    width: 20px;
  }
  .name {
    flex: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .author {
    width: 100px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
.office_item:hover {
  cursor: pointer;
  opacity: 0.5;
}
// .office_item:hover span {
//   color: $primary;
// }
.more {
  display: inline-block;
  width: 100%;
  font-size: 13px;
  height: 35px;
  line-height: 35px;
  text-align: right !important;
  padding: 0px 10px;
  box-sizing: border-box;
  background: rgb(238, 237, 237);
}
.more:hover {
  cursor: pointer;
}
.office_item:nth-child(odd) {
  background: rgb(238, 237, 237);
}
.officialList_desc {
  width: 100%;
  margin-bottom: 30px;
}
/* 推荐榜 */

.recommendationList_wrap {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}

.recommendationList_item {
  width: 20%;
  padding: 10px;
  box-sizing: border-box;
}
.recommendationList_item:hover {
  cursor: pointer;
}
.recommendationList_img {
  position: relative;
}

.icon-bofang1 {
  position: absolute;
  bottom: 10px;
  right: 10px;
  font-size: 30px;
  background: rgba(0, 0, 0, 0.1);
  border-radius: 50%;
  color: rgb(255, 255, 255);
  opacity: 0;
  transition: 0.5s;
}
.recommendationList_item:hover .icon-bofang1 {
  opacity: 1;
}
.recommendationList_img img {
  width: 100%;
  border-radius: 5px;
}

.recommendationList_img .recommendationList_info {
  position: absolute;
  border-top-right-radius: 5px;
  border-top-left-radius: 5px;
  left: 0px;
  top: 0px;
  width: 100%;
  height: 30px;
  line-height: 30px;
  background: rgba(0, 0, 0, 0.3);
  text-align: right;
  padding: 0px 10px;
  box-sizing: border-box;
  color: #fff;
  font-size: 15px;
  .iconfont {
    font-size: 13px;
    padding-right: 2px;
  }
}

.recommendationList_titles {
  font-size: 16px;
  text-align: left;
  display: -webkit-box;
  overflow: hidden;
  white-space: normal;
  text-overflow: ellipsis;
  word-wrap: break-word;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
</style>
